import React, { useState } from 'react'
import { useEffect } from 'react'
import MyMusic from './components/MyMusic'
import FindMusic from './components/FindMusic'
import MyFollow from './components/MyFollow'

// 路由：Hash 地址和组件之间的对应关系
export default function App() {
  const [hash, setHash] = useState('')
  useEffect(() => {
    const hashChange = () => {
      // 每次 hash 切换都把 Hash 值记录到状态中，不同状态显示对应的组件
      const hash = window.location.hash
      setHash(hash)
    }
    hashChange()
    window.addEventListener('hashchange', hashChange)
    return () => {
      window.removeEventListener('hashchange', hashChange)
    }
  }, [])
  return (
    <>
      <nav className='navbar navbar-expand-lg navbar-light bg-light'>
        <div className='container'>
          <a className='navbar-brand' href='##'>
            网易云
          </a>
          <button
            className='navbar-toggler'
            type='button'
            data-bs-toggle='collapse'
            data-bs-target='#navbarSupportedContent'
            aria-controls='navbarSupportedContent'
            aria-expanded='false'
            aria-label='Toggle navigation'
          >
            <span className='navbar-toggler-icon'></span>
          </button>
          <div className='collapse navbar-collapse' id='navbarSupportedContent'>
            <ul className='navbar-nav me-auto mb-2 mb-lg-0'>
              <li className='nav-item'>
                <a
                  className='nav-link active'
                  aria-current='page'
                  href='#/findmusic'
                >
                  发现音乐
                </a>
              </li>
              <li className='nav-item'>
                <a className='nav-link' aria-current='page' href='#/mymusic'>
                  我的音乐
                </a>
              </li>
              <li className='nav-item'>
                <a className='nav-link' aria-current='page' href='#/myfollow'>
                  关注
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div className='container mt-3'>
        <div className='card'>
          <div className='card-body'>
            {hash === '#/findmusic' && <FindMusic />}
            {hash === '#/mymusic' && <MyMusic />}
            {hash === '#/myfollow' && <MyFollow />}
          </div>
        </div>
      </div>
    </>
  )
}
